<template>
    <div class="shoplist">
        <ul class="shoplist-content">
            <li v-for="(item) in carList" :key="item.shopid">
                <div :class="['check',{'active':item.flag}]" @click="check(item.shopid)"></div>
                <dl>
                    <dt>
                        <img :src="item.shopdata.cover" alt="">
                    </dt>
                    <dd>
                        <h6>{{item.shopdata.name}}</h6>
                        <car-count :shopid="item.shopid" :num="item.count"></car-count>
                    </dd>
                </dl>
            </li>
        </ul>
    </div>
</template>

<script>
import CarCount from './carCount';
import {mapActions,mapState,mapMutations} from 'vuex';
export default {
    components:{
        CarCount
    },
    created(){
        this.getCarList();
    },
    methods:{
        ...mapActions('car',['getCarList']),
        ...mapMutations('car',['SET_CHECKED']),
        check(shopid){
            this.SET_CHECKED(shopid)
        }
    },
    computed:{
        ...mapState('car',['carList'])
    }
}
</script>

<style lang="scss" scoped>
    .shoplist{
        width:100%;
        flex:1;
        overflow: auto;
        .shoplist-content{
            width:100%;
            padding:10px;
            display: flex;
            flex-direction: column;
            li{
                display: flex;
                align-items: center;
            }
            dl{
                display: flex;
                dt{
                    width:80px;
                    height: 80px;
                    margin:0 10px;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
            }
        }

        .check{
            @include size(20px,20px);
            @include all-border-1px(#eee,50%);
            border-radius: 50%;
            &.active{
                border-color:red;
                background: red;
            }
        }
    }
</style>